<!--
   社保管理
   参保管理首页
-->
<template>
  <div class="page_set">
    <div class="no-payslip">
      <img class="autoimg" src="../../../../assets/img/payslip/beijing.png" />
      <div class="cent">
        <h2>最智能、最简单的社保公积金系统</h2>
        <h3>
          更多个性化设置、更方便、更快捷
        </h3>
        <a-button type="primary" class="mr12" @click="open">
          马上开通
          <a-icon type="right" />
        </a-button>
      </div>
    </div>

    <!-- <div class="bg-box">
      <img class= "autoimg" src="../../../../assets/img/payslip/beijing.png"/>
      <h1>最智能、最简单的社保公积金系统</h1>
      <p>更多个性化设置、更方便、更快捷</p>
      <a-button type="primary" class="mr12" @click="open">
        马上开通
        <a-icon type="right" />
      </a-button>
    </div> -->
  </div>
</template>

<script>
export default {
  methods: {
    open() {
      this.$emit("change");
    }
  }
};
</script>

<style lang="less" scoped>
.autoimg {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.no-payslip {
  position: relative;
  text-align: center;
  margin: auto 0;
  width: 100%;
  height: 300px;
  // background: url(~@/assets/img/payslip/beijing.png);
  background-size: 100% 100%;
  .cent {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    h2 {
      color: #42b8d7;
      font-weight: 600;
      font-size: 24px;
    }
    h3 {
      color: #9c9c9c;
    }
  }
}
.bg-box {
  width: 100%;
  height: 300px;
  // background: url(/beijing.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  padding-top: 48px;
  padding-bottom: 48px;
  border-radius: 5px;
  overflow: hidden;
  h1 {
    color: #42b8d7;
    font-size: 24px;
    font-weight: 500;
  }
  p {
    color: #9c9c9c;
    font-size: 14px;
  }
}
</style>
